<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - ol4加载百度离线地图</title>
    <script src='../lib/bd09.js'></script>
    <!--    <script src='../lib/ol4/ol4.js'></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <link rel='stylesheet' href='../css/ol4/ol.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projectionBD09 = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
		units: '',
		axisOrientation: 'neu',
		global: false
	});
	ol.proj.addProjection(projectionBD09);
	ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
		return lngLatToMercator(coordinate);
	}, (coordinate => {
		return mercatorToLngLat(coordinate);
	}));
	console.log(ol.proj.get('BD:09'));
	const tileSize = 256;
	const projectionExtentInBD09 = projectionBD09.getExtent();
	const size = ol.extent.getWidth(projectionExtentInBD09) / tileSize;

	const resolutions = [];
	let matrixIds = [];
	const maxZoom = 18;
	const minZoom = 8;
	// 计算百度使用的分辨率
	for (let i = 0; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
		matrixIds[i] = i;
	}
	console.log(resolutions, matrixIds);

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions,
		extent: projectionExtentInBD09
		// matrixIds
		// tileSize: [512, 512]
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'BD:09',
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord) => {
			let [z, x, y] = tileCoord;
			return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${-1 - y}&z=${z}&styles=pl&udt=20210407`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource,
		tilePixelRatio: 2
	});
	// 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]; 南京 - 【118.802997,32.093289】; 杭州 - 120.176703,30.24834
	//
	// const centerPoint = [113.35984, 23.127064];
	// const centerPoint = [113.31581962394478, 23.142719879725917];
	const centerPoint = [116.403964,39.915119];

	const circlePoint = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');
	console.log(circlePoint);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon(
			/** @type {olx.style.IconOptions} */ ({
				anchor: [10, 26],
				anchorXUnits: 'pixels',
				anchorYUnits: 'pixels',
				src: '../image/position_orange.png'
			})
		)
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const map = new ol.Map({
		layers: [
			baiduMapLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'),
			projection: 'BD:09',
			zoom: 17,
			maxZoom: 18,
			minZoom: 11,
			resolutions
		})
	});
</script>
</html>
